var $image = $('#image');
// - 设置配置项
var option = {
    // 纵横比(宽高比)
    aspectRatio: 1, // 正方形
    // 指定预览区域
    preview: '.img-preview' // 指定预览区的类名（选择器）
};
// - 调用cropper方法，创建剪裁区
$image.cropper(option);

// 头像上传：
// 1.点击按钮，flie触发点击事件
$('#chooseImageBtn').on('click', function() {
        $('#chooseImageInp').click()
    })
    // 需求2：选择图片
let layer = layui.layer
    // 当选择的文件发生改变的时候
$('#chooseImageInp').on('change', function() {
    // 将路径的第一个路径获取过来，file存储的是对象，无法直接赋值路径
    let file = this.files[0]
        // 如果用户点击取消，file就会等于undefined，后面的代码就会报错
    if (file == undefined) {
        return layer.msg('上传头像不能为空')
    }
    // 使用url内置对象的方法生成虚拟路径
    let newURL = URL.createObjectURL(file)
        // 先销毁旧的裁剪区域，设置图片路径，更换新的裁剪区域
    $image.cropper('destroy').attr('src', newURL).cropper(option)

})
$('#uploadBtn').on('click', function() {
    let dataURL = $image.cropper('getCroppedCanvas', { width: 30, height: 30 }).toDataURL('image/png');;
    // 2. 把canvas转成base64格式字符串


    axios({
        url: '/my/update/avatar',
        method: 'POST',
        data: "avatar=" + encodeURIComponent(dataURL)

    }).then(({ data: res }) => {
        //成功回调
        // let { data: { status, message } } = res
        if (res.status != 0) {
            return layer.msg(res.message)
        }
        layer.msg('恭喜你。修改头像成功')
        window.parent.getUserInfo()
    });
})